<template>
  <Tab />
  <div class="container">
    <div class="content">
      <div class="top-container">
        <!-- 标题 -->
        <div class="title">
          <span>AI智能 #</span>
          <span>预定最佳机票</span>
        </div>

        <!-- 去哪里 -->
        <div class="tiket">
          <div class="center">
            <img src="../../static/img/air1.png" alt="" />
            <span>{{ activeName }}</span>
          </div>
        </div>

        <!-- 选择日期和位置 -->
        <div class="check-data-position">
          <div>
            <div class="position">
              <img src="../../static/img/location.png" alt="" />
              <span class="cut_one">{{ fromCity }}</span>
            </div>
            <img
              class="arrows"
              src="../../static/img/arrows.png"
              alt=""
              @click="pickCity"
            />
          </div>
          <div>
            <img src="../../static/img/date.png" alt="" @click="pickDate" />
            <span>{{ ticketDate }}</span>
            <span v-if="ticketDate === nowDate">今天</span>
          </div>
        </div>

        <!-- 热门城市 -->
        <div class="citys">
          <div>
            <span>热门城市</span>
          </div>
          <div class="city-list">
            <div
              class="item"
              :class="{ active: index === activeIndex }"
              v-for="(item, index) in cityList"
              :key="index"
              @click="handleCheck(index, item)"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 下一步按钮 -->
  <div class="btn" @click="jumpNext">
    <span>下一步</span>
  </div>

  <!-- 弹出城市选择列表 -->
  <van-popup v-model:show="showPickCity" position="bottom" round>
    <van-picker
      title="城市选择"
      :columns="citynameList"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </van-popup>

  <!-- 日期选择 -->
  <van-popup v-model:show="showPickDate" position="bottom" round>
    <van-date-picker
      v-model="currentDate"
      title="选择日期"
      @confirm="onDateConfirm"
      @cancel="showPickDate = false"
    />
  </van-popup>
</template>
<script setup>
import { uni } from "@dcloudio/uni-h5";
import { ref } from "vue";
import { city, province } from "./data/citys.js";
import { showSuccessToast, showFailToast } from "vant";
import dayjs from "dayjs";
import useStore from "../store/tiketStore.js";

let activeIndex = ref();
let store = useStore();
let fromCity = ref("北京");
let nowDate = ref(dayjs(new Date()).format("M月DD日"));
let ticketDate = ref(dayjs(new Date()).format("M月DD日"));
let showPickDate = ref(false);
const currentDate = ref(dayjs(new Date()).format("YYYY-MM-DD").split("-"));
let citynameList = ref();
let activeName = ref("您想飞去哪里?");
let cityList = ref([
  {
    name: "上海",
    value: "shanghai",
  },
  {
    name: "北京",
    value: "shanghai",
  },
  {
    name: "南京",
    value: "shanghai",
  },
  {
    name: "福州",
    value: "shanghai",
  },
  {
    name: "宁德",
    value: "shanghai",
  },
  {
    name: "南平",
    value: "shanghai",
  },
  {
    name: "昆明",
    value: "shanghai",
  },
  {
    name: "成都",
    value: "shanghai",
  },
  {
    name: "昆明",
    value: "shanghai",
  },
  {
    name: "成都",
    value: "shanghai",
  },
]);
let showPickCity = ref(false);

function handleCheck(index, item) {
  activeIndex.value = index;
  activeName.value = item.name;
}

function pickCity() {
  citynameList.value = provinceChirden();
  showPickCity.value = true;
}
function pickDate() {
  showPickDate.value = true;
}
const onConfirm = ({ selectedValues }) => {
  let [province, city] = selectedValues;
  fromCity.value = city ?? province;
  showPickCity.value = false;
};

const onCancel = () => (showPickCity.value = false);

const onDateConfirm = (selectedValues) => {
  let [year, month, day] = selectedValues.selectedValues;
  ticketDate.value = dayjs(`${month}-${day}`).format("M月DD日");
  showPickDate.value = false;
};

//构建省-城市列表
function provinceChirden() {
  let cityList = province.map((item) => {
    return {
      text: item.name,
      value: item.name,
      children: city
        .filter((city) => city.province === item.province)
        .map((item) => {
          return {
            text: item.name,
            value: item.name,
          };
        }),
    };
  });
  return cityList;
}

//点击下一步
function jumpNext() {
  if (activeName.value === "您想飞去哪里?") {
    showFailToast("请输入目的地");
    return;
  }
  store.parms={
    toCity:activeName.value ,
    date:ticketDate.value,
    fromCity:fromCity.value,
    isNowDate:nowDate.value===ticketDate.value
  }
  uni.navigateTo({
    url: `/pages/ordercheck/index`,
  });
}
</script>
<style scoped lang="scss">
.container {
  background-size: cover; /* 背景图覆盖整个元素 */
  // background-position: center; /* 背景图居中 */
  height: 100dvh; /* 高度设置为100%，根据实际情况调整 */
  width: 100dvw; /* 宽度设置为100%，根据实际情况调整 */
  position: fixed; /* 定位为固定，使得背景图覆盖整个页面 */
  top: 0;
  left: 0;
  // z-index: - 1;  /* 确保背景在其他内容之下 */
  background-image: url("../../static/img/background2.png");
  // border: 1px solid red;
}

.content {
  width: 664rpx;
  position: absolute;
  top: 650rpx;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;

  .top-container {
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      & > :nth-child(1) {
        width: 342rpx;
        height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 88rpx;
        color: #000000;
        line-height: 88rpx;
        text-align: center;
        font-style: normal;
      }
      & > :nth-child(2) {
        width: 528rpx;
        height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 88rpx;
        color: #0effaf;
        line-height: 88rpx;
        text-align: left;
        font-style: normal;
        background: linear-gradient(
          0deg,
          #2d94ff 0%,
          #4414f2 48%,
          #ff5e99 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 10px;
      }
    }

    .tiket {
      width: 666rpx;
      height: 120rpx;
      background: #ffffff;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
      border-radius: 60rpx;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .center {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 56rpx;
          height: 50rpx;
        }
        span {
          // width: 264rpx;
          height: 52rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 40rpx;
          color: #d3d3d3;
          line-height: 52rpx;
          text-align: center;
          font-style: normal;
          margin-left: 10px;
        }
      }
    }
    .check-data-position {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;

      & > :nth-child(1) {
        width: 320rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 70rpx;
        border: 2rpx solid #e4e9ef;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .position {
          display: flex;
          align-items: center;
          & > :nth-child(1) {
            width: 32rpx;
            height: 38rpx;
          }
          & > :nth-child(2) {
            width: 110rpx;
            // height: 36rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
            color: #000000;
            line-height: 36rpx;
            text-align: center;
            font-style: normal;
            margin-left: 5px;
          }
        }

        .arrows {
          width: 30rpx;
          height: 16rpx;
        }
      }

      & > :nth-child(2) {
        width: 320rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 70rpx;
        border: 2rpx solid #e4e9ef;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 40rpx;
          height: 32rpx;
          margin-right: 5px;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          color: #000000;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .citys {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      & > :nth-child(1) {
        display: flex;
        justify-content: flex-start;
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #7b7b7b;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .city-list {
        display: flex;
        flex-flow: row wrap;
        margin-top: 10px;
        justify-content: center;
        height: 180rpx;
        align-content: space-around;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120rpx;
          height: 72rpx;
          background: #ffffff;
          border-radius: 40rpx;
          border: 2rpx solid #e4e9ef;
          margin: 0 2px;

          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
            line-height: 28rpx;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440rpx;
  height: 100rpx;
  background: #c0c8d5;
  border-radius: 54rpx;
  position: fixed;
  bottom: 122rpx;
  left: 50%;
  transform: translate(-50%, 0);

  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
  }

  &:active {
    background: #005ff9;
    border-radius: 54rpx;
    border: 2rpx solid #e4e9ef;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
    span {
      color: #ffffff;
    }
  }
}
.active {
  border: 2rpx solid #005ff9 !important;
  span {
    color: #005ff9 !important;
  }
}
</style>
